<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素类名操作
			addClass()			有参：1个参和多个参
								语法：addClass("类名")
								<p class="类名">
								语法：addclass("类名1 类名2")
								<p class="类名1 类名2">
								功能：匹配元素集合中的所有元素
										添加一个或多个类名操作
								理解：元素添加存在的样式
			removeClass()		功能：匹配元素集合中的所有元素
									  移除一个或者多个类名操作
			toggleclass()切换	功能：如果元素有类名移除，没有则添加
			hasClass()			功能：检查匹配元素集合是否包含指定类名
										返回值bool
		 -->
		 <!-- 要求：1. jq引入
					2.html：div		id="targeElement"
							4个按钮  id="addClassBtn"
									id="removeClassBtn"
									id="toggleClassBtn"
									id="hasClassBtn"
							div		id="resultArea"
					3.css:  .bgColor{  300*300  背景色任意}
							.broder{  10个像素实线  红色边框  倒角画圆}
		  -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .bgColor{
				 width: 300px;
				 height: 300px;
				 background: #ff0000;
				 
			 }
			.borders{
				border: 10px solid yellow;
				border-radius: 50%;
			}
		 </style>
	</head>
	<body>
		<div id="targeElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名</button>
		<div id="resultArea"></div>
		<script>
			//1.点击   添加类名  按钮  添加效果【样式】  300*300 背景色红色
			$("#addClassBtn").click(function(){
				//div  添加样式
				$("#targeElement").addClass("bgColor borders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//2.点击  添加类名  按钮  添加效果【样式】
			//  300*300  背景色红色  圆  外层  10px黄色框
			//3.点击  移除类名 按钮  添加效果【样式】300*300背景红色
			$("#removeClassBtn").click(function(){
				//div  添加样式
				$("#targeElement").removeClass("borders");
				$("#resultArea").html("<h4>移除样式类名：borders</h4>");
			});
			//4.点击  切换类名  按钮  添加效果【样式】
			//   300*300  背景色红色   圆  外层 10px黄色框
			$("#toggleClassBtn").click(function(){
				//div添加样式---存在样式：类名
				$("#targeElement").toggleClass("bgColor");
				$("#resultArea").html("<h4>切换样式类名：borders</h4>");
			});
			//
			$("#toggleClassBtn").click(function(){
				//div添加样式---存在样式：类名
				$("#targeElement").toggleClass("borders");
				$("#resultArea").html("<h4>切换样式类名：borders</h4>");
			});
			$("#hasClassBtn").click(function(){
				//div添加样式---存在样式：类名
				var hc=$("#targeElement").hasClass("borders");
				$("#resultArea").text("检查当前样式是否存在："+hc);
			});
		</script>
	</body>
</html>